import React, { useEffect, useState } from 'react';
import SettlementComStyle from './settlement.module.css'
import {ReactComponent as ItemTwoIcon} from '../../../../../../assets/icon/home/结算金额.svg'
import { Button } from 'antd'
import { useNavigate } from 'react-router-dom'
import { useSpring, animated } from '@react-spring/web';

const formatCurrency = (value) => {
  return new Intl.NumberFormat('de-DE', {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2
  }).format(value);
};

const CurrencyScroller = ({ endAmount }) => {
  const [amount, setAmount] = useState(0);

  useEffect(() => {
    setAmount(endAmount);
  }, [endAmount]);

  const props = useSpring({
    from: { amount: 0 },
    to: { amount: amount },
    config: { duration: 2000 },
  });

  return (
    <animated.span className={SettlementComStyle.currency}>
      {props.amount.to((n) => formatCurrency(n))}
    </animated.span>
  );
};
function SettlementComponent() {
    const navitage=useNavigate()
  return (
    <div className={SettlementComStyle.amount_app_item}>
        <div className={SettlementComStyle.amount_app_item_left}>
          <p>
            <span><CurrencyScroller endAmount={653.33}/></span>
            <span>+42.32%</span>
          </p>
          <Button style={{ width: "80%", margin: "10px 0" }}>结算金额</Button>
        </div>
        <div className={SettlementComStyle.amount_app_item_right}>
          <ItemTwoIcon width={70} />
        </div>
      </div>
  )
}

export default SettlementComponent
